<?php
$this->headLink(array('href' => '/cms/styles/style.css', 'rel' => "stylesheet", 'type' => "text/css"));
$this->headStyle()->appendStyle(<<<EOD
.goodInput {
	width: 200px;
}
.priceInput {
	width: 100px;
	text-align: right;
}
.amountInput {
	width: 50px;
	text-align: right;
}
#findUserLabel {
	float: left;
	height: 30px;
	padding-top: 10px;
}
#findUserWidget {
	padding-left: 120px;
}
.userName {
	/*display: none;*/
	padding-top: 10px;
	height: 30px;
	color: #000033;
	font-weight: bold;
	cursor: text;
}
#userFilter {
}
#userFilter input {
	width: 200px;
}
.select-variant {
	border: 1px solid #CCCCCC;
	max-width: 300px;
	max-height: 200px;
	overflow: scroll;
	position: absolute;
	background-color:#E4E1FF;
}
.select-variant ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	
}
.select-variant li {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-top: 8px;
	padding-right: 4px;
	padding-bottom: 8px;
	padding-left: 4px;
	margin: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #9393FF;
}
.select-variant li.m-over {
	background-color: #CAC4FF;
}

.select-variant li#newUser {
	font-weight: bold;
	background-color: #006699;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	text-align: center;
}
#userList li#newUser a {
	color: #FFFFFF;
}
#goodTable {
	clear: both;
	float: none;
}
.hidden-box {
	display: none;
}
.totalPriceBox, .goodPriceBox {
	width: 80px;
	text-align: right;
}
.numBox {
	width: 30px;
	text-align: right;
}
EOD
);

$this->headScript()->appendFile('/cms/scripts/dojo/dojo.js');

$this->headScript()->appendScript(<<<EOD
dojo.require("dojo.number");
dojo.require("dojo.string");


dojo.addOnLoad(

	function () {
		
		dojo.query('.goodInput').connect('onkeyup',
				function (evt) {
					appendGoodToolTip(evt.target.value, evt.target.parentNode,evt.keyCode);
				}
			);
		
		dojo.query('.priceInput').connect('onkeydown',attachPriceChange);
		
		dojo.query('.amountInput').connect('onkeydown',attachAmountChange);
		
		dojo.query('.removeBtn').connect('onclick', appendDeleteGood);
		
		// Добавление строчки
		document.getElementById('addRowBtn').onclick = 
			function () {
			
				var new_row = dojo.create('TR',[],'lastCell','before');
				
				var num_cell = dojo.create('TD',[],new_row);
				dojo.query(dojo.create('DIV',null,num_cell))
					.addClass('numBox');
	

	
				var good_cell = dojo.create('TD',[],new_row);
				
				var good_id = dojo.create('INPUT',{type : 'hidden'},good_cell);
				dojo.query(good_id)
					.attr('name','good_id[]')
					.addClass('goodId');
				
				var good_input = dojo.create('INPUT',[],good_cell);
				dojo.query(good_input,good_cell)
					.addClass('modalInput')
					.addClass('goodInput')
					//.attr('name','good_name[]')

					// если начинаем печатать, выводим окно с вариантами
					.connect('onkeyup',
							function (evt) {
								appendGoodToolTip(evt.target.value, evt.target.parentNode,evt.keyCode);
							}
						);
					
					
					
					
				var good_variant = dojo.create('DIV',[],good_cell);
				dojo.query(good_variant)
					.addClass('select-variant') 
					.addClass('hidden-box');
				
				var good_variant_list = dojo.create('UL',[],good_variant);
				
				
				var price_cell  = dojo.create('TD',[],new_row);
				var price_input = dojo.create('INPUT',[],price_cell);
				dojo.query(price_input)
					.addClass('modalInput')
					.addClass('priceInput')
					//.attr('name','good_price[]')
					.connect('onkeydown',attachPriceChange);
				dojo.query(price_cell)
					.addContent(' р.');



				var amount_cell = dojo.create('TD',[],new_row);
				var amount_input = dojo.create('INPUT',[],amount_cell);
				dojo.query(amount_input)
					.addClass('modalInput')
					.addClass('amountInput')
					//.attr('name','good_amount[]')
					.attr('value','1')
					.connect('onkeydown',attachAmountChange);;
				dojo.query(amount_cell)
					.addContent(' шт.');
				

				var price_box_cell = dojo.create('TD',null,new_row);
				dojo.query(dojo.create('INPUT',{type : 'hidden'},price_box_cell))
					.addClass('goodPriceStorage');
				
				var price_box = dojo.create('DIV',null,price_box_cell);
				dojo.query(price_box)
					.addClass('goodPriceBox');
					
				var minus_cell =  dojo.create('TD',[],new_row);
				var minus_btn = dojo.create('BUTTON',{type:'button'},minus_cell);
				dojo.query(minus_btn)
					.addClass('okButton')
					.connect('onclick',appendDeleteGood);
				var minus_img = dojo.create('IMG',{src : '/cms/images/minus.png', width : "16", height : "16"},minus_btn);
				
				
				numBuilder();
				
				return false;
			};
			
			
		// Нажимаем пользователя и покаываем окно поиска
		dojo.query('#userName').connect('onclick',
			function (evt) {
				var hide_input = dojo.fadeOut({node: evt.target,duration: 300});
				
				dojo.connect(hide_input,'onEnd',
					function(e) {
						dojo.query('#userName').addClass('hidden-box');
						dojo.query('#userFilter')
							.removeClass('hidden-box')
							.attr('value','')
							.fadeIn({duration: 300}).play();
						
					}
				);
				
				hide_input.play();
			} 
		);
		
		// Если кликаем в окно фильтра пользователей и начинаем, что-нибудь вводить
		dojo.query('#userFilter').query('input').connect('onkeyup',
			function (evt) {
				if (evt.keyCode==27) {
					dojo.query('#userListBox').addClass('hidden-box');
					return false;
				}
				
				if (evt.target.value!='') {
					dojo.xhrPost({
						url: '/cms/orders/userlist',
						content: {'mask': evt.target.value},
						handleAs: 'json',
						
						load: 
							function (responseObject, ioArgs) {
								if (responseObject.length>0) {
									
									dojo.query('#userList').query('li').forEach(
										function(item) {
											if (item.id!='newUser') {
												dojo.destroy(item);
											}
										});
										
									for (var r=0;r<responseObject.length;r++) {
										var new_li = dojo.create('LI',[] ,'newUser','before');
										
										var setStyle = function (el,eventName,color) {
											dojo.connect(el,'onmouseover',
												function () {
													dojo.query(el).addClass('m-over');
												});
											dojo.connect(el,'onmouseout',
												function () {
													dojo.query(el).removeClass('m-over');
												});
										};
										setStyle(new_li);
										
										
										var new_a = dojo.create('A',{href: 'javascript:'},new_li);
										
										var attachOnclickEv = function (respO) {
											dojo.query(new_a)
												.addContent(respO[1])
												.onclick(
													function (evt) {
														dojo.byId('userName').innerHTML = evt.target.text;
														dojo.byId('userId').value = respO[0]; 
														
														//dojo.fadeOut({node: dojo.byId('userListBox'),duration: 300}).play()
														dojo.query('#userListBox').toggleClass('hidden-box');
														var hide_input = dojo.fadeOut({node: dojo.byId('userFilter'),duration: 300});
														
														dojo.connect(hide_input,'onEnd',
																function(e) {
																	dojo.query('#userName').removeClass('hidden-box');
																	dojo.query('#userFilter').addClass('hidden-box');
																	dojo.fadeIn({node: dojo.byId('userName'),duration: 300}).play();
																}
															);
		
														hide_input.play();
														
														return false;
													}
												);
										}
										attachOnclickEv(responseObject[r]);
										
									}
									
									
									dojo.query('#userListBox').removeClass('hidden-box');
								}
								return responseObject
							},
							
						error: 
							function(response, ioArgs){
								alert(response);
								return response;
							}
	
					});
				}
			}
		);
			
		
		dojo.query('#submitBtn').connect('onclick',
			function () {
				// Проверка ввода пользователя
				var userIdInput = dojo.query('#userId');
				if (userIdInput.length==1) {
					if (userIdInput[0].value=='') {
						alert("Необходимо выбрать пользователя, на которого оформляется заказ");
						return false;
					}
				}
				
				
				// Проверка ввода информации о товарах
				dojo.query('.goodInput')
					.forEach(
						function (item) {
							if (item.value=='') {
								alert('Поля с названием товаров не могут быть пустыми');
								return false;
							}
						})
					.attr('name','good_name[]');
				
				dojo.query('.priceInput	')
					.forEach(
						function (item) {
							if (item.value=='') {
								alert('Поля с ценой товаров не могут быть пустыми');
								return false;
							}
						})
					.attr('name','good_price[]');
				
					
				dojo.query('.amountInput')
					.forEach(
						function (item) {
							if (item.value=='') {
								alert('Поля с количеством товаров не могут быть пустыми');
								return false;
							}
						})
					.attr('name','good_amont[]');
				
				var new_form = dojo.create('form',{method:'post',action:''},dojo.body());
				dojo.query('#formEmul').place(new_form);
				new_form.submit();
				
			});
		
		numBuilder();
		
	});
	
var appendGoodToolTip = function (inserted_value,tooltip_box,button_pressed) {
	
	var variant_box = dojo.query('div',tooltip_box);
	
	if (button_pressed==27) {
		dojo.query(variant_box).addClass('hidden-box');
		return false;
	}
	if (inserted_value!='') {
		dojo.xhrPost({
			url: '/cms/orders/goodlist',
			content: {'mask': inserted_value},
			handleAs: 'json',
			load:
				function (responseObject, ioArgs) {
					
					if (responseObject.length>0) {
						var variant_list = variant_box.query('ul')
						variant_list.query('li').forEach(dojo.destroy);
						
						for (var r=0;r<responseObject.length;r++) {
							var var_li = dojo.create('LI',[],variant_list[0]);
							
							setMouseEvents = function (obj) {
								dojo.query(obj)
									.connect('onmouseover',
										function (evt) {
											dojo.query(obj).addClass('m-over')
										})
									.connect('onmouseout',
										function (evt) {
											dojo.query(obj).removeClass('m-over')
										});
							};
							setMouseEvents(var_li);
							
							var var_a = dojo.create('a',[],var_li);
							var append_action = function (obj,data) {
									dojo.query(obj)
										.addContent(data[1])
										.attr('href','javascript:;')
										.connect('onclick',function (evt) {
												var rootTrNode = dojo.query(evt.target.parentNode.parentNode.parentNode.parentNode.parentNode);
												rootTrNode.query('.goodId').attr('value',data[0]);
												rootTrNode.query('.goodInput').attr('value',data[1]);
												rootTrNode.query('.priceInput').attr('value',data[2]);
												rootTrNode.query('.amountInput').attr('value',1);
												variant_box.toggleClass('hidden-box');
												numBuilder();
											});
								}
							append_action(var_a,responseObject[r]);
						}
						
						variant_box.removeClass('hidden-box');
						
						var box_hide_event = dojo.connect(dojo.doc,'onclick',
							function () {
								variant_box.toggleClass('hidden-box');
								dojo.disconnect(box_hide_event);
							}
						);
						
					} else {
						
						variant_box.toggleClass('hidden-box');
					}
				},
			error:
				function(response, ioArgs){
					dojo.byId("toBeReplaced").innerHTML = 
					"An error occurred, with response: " + response;
					return response;
				}
		});
	}
}

var attachPriceChange = function (evt) {
		var old_value = evt.target.value;
		var onkeyup_event = dojo.connect(evt.target,'onkeyup',
				function () {
					if (evt.target.value.match(/^([0-9])*(\.[0-9]{0,2})?$/i)==null) {
						evt.target.value = old_value;
					} else {
						numBuilder();
						dojo.disconnect(onkeyup_event);
					}
				});
	}

var attachAmountChange = function (evt) {
		var old_value = evt.target.value;
		var onkeyup_event = dojo.connect(evt.target,'onkeyup',
				function () {
					if (evt.target.value.match(/^([0-9])*$/i)==null) {
						evt.target.value = old_value;
					} else {
						numBuilder();
						dojo.disconnect(onkeyup_event);
					}
				});
	}

var appendDeleteGood = function (e) {
		if (confirm('Удалить строчку из списка?')) {
			dojo.destroy(e.target.parentNode.parentNode);
			numBuilder();
		}
	}

var numBuilder = function () {

		dojo.query('#goodTable').query('tr').forEach(
			function(node, index, nodeList){
				var tr_node = dojo.query(node);
				if (tr_node.attr('id')!='lastCell') {
					tr_node.query('.numBox').empty().addContent((index+1)+'.');
					var good_price = tr_node.query('.priceInput').attr('value')[0];
					good_price = /*dojo.string.trim*/(good_price)=='' ? 0 : good_price;
					var good_amount = tr_node.query('.amountInput').attr('value');
					var good_amount = /*dojo.string.trim*/(good_amount)=='' ? 1 : good_amount;
					
					var total_good_price = dojo.number.round(good_price*good_amount,2);
					tr_node.query('.goodPriceBox').empty().addContent(total_good_price+' р.');
					tr_node.query('.goodPriceStorage').attr('value',total_good_price);
				}
			}
		);
		var priceList = dojo.query('#goodTable').query('.goodPriceStorage').attr('value');
		var totalPrice = 0;
		for (var p=0;p<priceList.length;p++) {
			totalPrice += dojo.number.parse(priceList[p].replace(/\./i,','));
		}
		dojo.query('#goodTable').query('.totalPriceBox').empty().addContent(dojo.number.round(totalPrice,2)+' р.');
		
}
EOD
);

$this->layout()->body_attr = 'class="modal"';
?>

<div id="formEmul">
  <div id="findUserLabel" class="stnd_font">
  Пользователь:  </div>
      <div id="findUserWidget"><input name="user_id" id="userId" type="hidden" value="<?= $this->user_id ?>" />
        <div<?= $this->user_name==null ? ' id="userName"' : '' ?> class="stnd_font userName"><?= $this->user_name==null ? 'Пользователь не выбран' : $this->user_name?></div>
        
        <div id="userFilter" class="hidden-box">
          <input type="text" class="modalInput" />
        </div>
        <div id="userListBox" class="select-variant hidden-box">
          <ul id="userList">
            <li id="newUser"><!-- a href="#">Добавить нового пользователя</a --></li>
          </ul>
        </div>
     </div>
      
  <table border="0" cellpadding="2" cellspacing="0" class="stnd_font" id="goodTable">
  <?php for ($g=0;$g<count($this->goods);$g++) : ?>
    <tr>
      <td><div class="numBox"></div></td>
      <td><input type="hidden" name="good_id[]" class="goodId" value="<?= $this->goods[$g]['item_id'] ?>" />
      <input type="text" class="goodInput modalInput" value="<?= $this->goods[$g]['name'] ?>" /><div class="select-variant hidden-box"><ul></ul></div></td>
      <td><input type="text" class="modalInput priceInput" value="<?= $this->goods[$g]['price'] ?>" />
      р.</td>
      <td><input type="text" class="modalInput amountInput" value="<?= $this->goods[$g]['count'] ?>" />
шт.</td>
      <td valign="bottom"><input type="hidden" class="goodPriceStorage" /><div class="goodPriceBox"></div></td>
      <td><button type="button" class="okButton removeBtn"><img src="/cms/images/minus.png" width="16" height="16" /></button></td>
    </tr>
  <?php endfor; ?>
    <tr id="lastCell">
      <td colspan="4" align="right">Итоговая стоимость:</td>
      <td><div class="totalPriceBox">р.</div></td>
      <td><button class="okButton"  id="addRowBtn" type="button"><img src="/cms/images/plus.png" width="16" height="16" /></button></td>
    </tr>
  </table>
<input type="button" id="submitBtn" class="modalInput" value="Сохранить"  />
</div>